import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';

import {
    Button,
    DatePicker,
    Form,
    Input,
    Modal,
    Radio,
    Tag,
    Select,
    InputNumber,
    message,
    Row,
    Col,
    Checkbox,
    Switch,
} from 'antd';
import { modalLayoutLg, modalLayoutMd } from '@/config/layout';
import { request } from 'umi';
const DictModal = (props: any, refs: any) => {
    const [form] = Form.useForm();
    // const [fileList,setfileList] = useState([]);
    const [measureClassData, setmeasureClassData] = useState([]);
    const { setFieldsValue, resetFields } = form;
    const value1 = Form.useWatch('1', form);
    const value2 = Form.useWatch('2', form);
    const value3 = Form.useWatch('3', form);
    const [templateObj, settemplateObj] = useState({
        1: '',
        2: '',
        3: ''
    })
    const [templateIdsObj, settemplateIdsObj] = useState({
        1: '',
        2: '',
        3: ''
    })
    const [code, setCode] = useState('');
    const [isModalVisible, setIsModalVisible] = useState(false);
    const { TextArea } = Input;
    //显示弹窗
    const showModal = () => {
        setIsModalVisible(true);
    };

    //取消
    const handleCancel = () => {
        setIsModalVisible(false);
        setCode('');
        resetFields();
        props.callback && props.callback();
    };
    //确定
    const handleOk = () => {
        form
            .validateFields()
            .then((vals) => {
                let Obj = form.getFieldsValue();
                Obj = {
                    ...Obj,
                };

                const url = code ? '/message/person-mode/editList' : '/message/person-mode/editList';
                // if (code) {
                //     Obj.id = code;
                // } else {
                // }


                let params = [];
                for (let i in Obj) {
                    console.log(i);
                    console.log(Obj[i]);
                    params.push({
                        "id": templateIdsObj[i],
                        "personId": code,
                        "modeType": i,
                        "targetAddress": templateObj[i],
                        "checked": Obj[i]
                    })
                }
                request(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    data: params,
                }).then((res) => {
                    message.success(res?.meta?.msg);
                    setIsModalVisible(false);
                    handleCancel();
                });
            })
            .catch((info) => { });
    };

    const getDetail = (id: any) => {
        request('/message/person-mode/queryByUserIdList', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            data: {
                'personId': id,
            },
        }).then((res) => {
            // setFieldsValue(res?.data);
            let data = res?.data || [];
            let templateObjn = { 1: '', 2: '', 3: '' };
            let templateOIdsbjn = { 1: '', 2: '', 3: '' };
            let checkeds = {

            }
            data.map((e, i) => {
                templateObjn[e.modeType] = e.targetAddress
                templateOIdsbjn[e.modeType] = e.id;
                checkeds[e.modeType] = e.checked
            })
            settemplateObj(templateObjn)
            settemplateIdsObj(templateOIdsbjn)
            console.log(checkeds);
            setFieldsValue(checkeds)
            showModal();
        });
    };
    useImperativeHandle(refs, () => ({
        init: (id: any, record: any) => {
            if (id) {
                setCode(id);
                getDetail(id);
            } else {
                resetFields();
                showModal();
            }

            // setfileList([]);
        },
    }));
    const options = [
        { label: '短信', value: 2 },
        { label: '邮件', value: 1 },
        { label: '微信', value: 3 },
    ];
    return (
        <Modal
            title={code === '' ? '新增' : '编辑'}
            visible={isModalVisible}
            onOk={handleOk}
            onCancel={handleCancel}
            centered
            width={500}
            maskClosable={false}
            bodyStyle={{
                maxHeight: window.innerHeight - 150,
                overflowY: 'auto',
            }}
        >
            <Form form={form} {...modalLayoutMd}>
                <Form.Item
                    label={'邮件'}
                    name={'1'}
                    extra={
                        <span >{templateObj[1]}</span>
                    }
                >
                    <Switch checked={value1} onChange={(checked) => {
                        console.log(checked);
                        setFieldsValue({
                            1: checked
                        })
                    }} />

                </Form.Item>
                <Form.Item
                    label={'短信'}
                    name={'2'}
                    extra={
                        <span >{templateObj[2]}</span>
                    }
                >
                    <Switch checked={value2} onChange={(checked) => {
                        console.log(checked);
                        setFieldsValue({
                            2: checked
                        })
                    }} />
                </Form.Item>

                <Form.Item
                    label={'微信'}
                    name={'3'}
                >
                    <Switch checked={value3} onChange={(checked) => {
                        console.log(checked);
                        setFieldsValue({
                            3: checked
                        })
                    }} />
                </Form.Item>
            </Form>
        </Modal>
    );
};
const AddMCom = forwardRef(DictModal);

export default AddMCom;
